<extend name="Public/common"/>
<block name="style"><link rel="stylesheet" href="__STATIC__/player/jplayer.flat.css" type="text/css" /></block>
<block name="content">
<!--包屑-->
<section class="breadcrumbs">
	<div class="container">
		<ul class="horizontal_list clearfix bc_list f_size_medium">
			<li class="m_right_10"><a href="<{:U('Index/index')}>" class="default_t_color">首页<i class="fa fa-angle-right d_inline_middle m_left_10"></i></a></li>
			<li class="m_right_10"><a href="<{:U('Artist/detail?id='.$data['artist_id'])}>" class="default_t_color"><{$data.artist_name}><i class="fa fa-angle-right d_inline_middle m_left_10"></i></a></li>
			<li class="current text-ellipsis"><a href="javascript:;" class="default_t_color "><{$title}></a></li>
		</ul>
	</div>
</section>
<div class="page_content_offset">
	<div class="container">	
		<div class="row clearfix">
			<!--左侧详细页面-->			
			<section class="col-lg-9 col-md-9 col-sm-9 m_xs_bottom_30">
					<div class="row clearfix m_bottom_30 ">
						<div class="col-lg-4 col-md-4 col-sm-4">	
								<div class="d_inline_b m_xs_left_0 m_xs_top_20 f_xs_none">
									<h5 class="m_left_20 f_left">
										<a class="color_dark d_block bt_link m_xs_left_20" href="<{:U('User/Home/index?uid='.$data['up_uid'])}>"><i class="fa fa-user m_right_5"></i><{$data.up_uname}></a>
									</h5>
									
									<button class="tr_delay_hover m_left_20 r_corners button_type_19 bg_color_orange_1 color_light music-action-btn" data-id="<{$data['up_uid']}>" data-action="follow">
										<i class="fa fa-plus m_right_6"></i>
										关注
									</button>					
								</div>						
								<div class="photoframe shadow  wrapper f_xs_none r_corners m_bottom_10">
									<div class=" thumbnail no_bd m_bottom_0">
										<a  href="<{:U('User/Home/index?uid='.$data['up_uid'])}>"><img src="<{$data['up_uid']|get_user_avatar="256"}>" class="tr_all_hover " ></a>
									</div>
								</div>							
						</div>
						<div class="t_xs_align_l col-lg-8 col-md-8 col-sm-8">
							<!--description-->
							<h2 class="color_dark fw_medium m_bottom_20 m_top_20 text-ellipsis"><a class="jp-play-me play default_t_color" id="one-play" href="javascript:;" data-id="<{$data.id}>"><{$data.artist_name}> - <{$data.name}></a></h2>
							<div class="clearfix  r_corners shadow single"  id="jp_container_N">		                    
			                    <div class="jp-type-playlist">
			                      	<div style="width: 0px; height: 0px;" id="jplayer_N" class="jp-jplayer hide"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata"></audio></div>
			                      	<div class="jp-gui">
				                        <div class="jp-interface">
				                          <div class="jp-controls">
				                            <div class="d-play">
				                              <a class="jp-play color_grey m_left_10 shadow "><i class="fa fa-play banner_title "></i></a>
				                              <a class="jp-pause hid color_grey m_left_10  shadow "><i class="fa fa-pause banner_title "></i></a>
				                            </div>
				                            <div class="jp-progress">
				                              <div class="jp-seek-bar bg_light_color_1">
				                                <div  class="jp-play-bar bg_color_blue_3">
				                                </div>
				                              </div>
				                            </div>
				                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted">00:00</div>
				                            <div class="hidden-xs hidden-sm">
				                              <a class="jp-mute color_grey" title="mute"><i class="fa fa-volume-up"></i></a>
				                              <a class="jp-unmute hid color_grey" title="unmute"><i class="fa fa-volume-off"></i></a>
				                            </div>
				                            <div class="hidden-xs hidden-sm jp-volume">
				                              <div class="jp-volume-bar bg_light_color_1">
				                                <div style="width: 100%;" class="jp-volume-bar-value bg_color_dark_2"></div>
				                              </div>
				                            </div>
				                            <div>
				                              <a class="jp-repeat" title="单曲重复"><i class="fa fa-retweet text-muted"></i></a>
				                              <a style="display: none;" class="jp-repeat-off hid" title="关闭重复"><i class="fa fa-retweet text-lt"></i></a>
				                            </div>
				                          </div>
				                        </div>
			                    	</div>
									<div style="display: none;" class="jp-no-solution">
										<span>需要更新</span>
										要发挥媒体你需要安装最新版本的浏览器或更新您的
										<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>
										.
									</div>
			                    </div>
			                </div>
							<hr class="divider_type_3 m_bottom_20">
							<div class="clearfix m_bottom_20 m_top_20 hidden-xs">
								<ul class="horizontal_list d_inline_b l_width_divider">
									<li class="m_right_15 f_md_none m_md_right_0">专辑:<a class="color_dark" href="<{:U('Album/detail?id='.$data['album_id'])}>"><{$data.album_name}></a></li>
									<li class="m_right_15 f_md_none">歌手:<a class="color_dark" href="<{:U('Artist/detail?id='.$data['artist_id'])}>"><{$data.artist_name}></a></li>
									<li class="m_right_15 f_md_none">类别:<a class="color_dark" href="<{:U('Genre/index?id='.$data['genre_id'])}>"><{$data.genre_name}></a></li>
									
								</ul>
							</div>
							<ul class="horizontal_list clearfix m_bottom_20">
								<li class="m_right_5">									
									<a href="javascript:;"  class="button_type_20 bg_light_color_2 f_size_large f_right tr_delay_hover r_corners music-action-btn" data-id="<{$data['id']}>" data-action="fav">
										<span class="tooltip tr_all_hover r_corners color_dark f_size_small">收藏[<span class="num"><{$data.favtimes}></span>]</span>
										<i class="fa fa-star"></i>
									</a>								
								</li>
								
								<li class="m_right_5">									
									<a href="javascript:;"  class="button_type_20 bg_light_color_2 f_size_large f_right tr_delay_hover r_corners music-action-btn" data-id="<{$data['id']}>" data-action="like">
										<span class="tooltip tr_all_hover r_corners color_dark f_size_small">喜欢[<span class="num"><{$data.likes}></span>]</span>
										<i class="fa fa-heart-o"></i>
									</a>								
								</li>
								<li class="m_right_5">
									<a href="javascript:;"  class="button_type_20 bg_light_color_2 f_size_large f_right tr_delay_hover r_corners music-action-btn" data-id="<{$data['id']}>" data-action="recommend">
										<span class="tooltip tr_all_hover r_corners color_dark f_size_small">推荐[<span class="num"><{$data.recommend}></span>]</span>
										<i class="fa fa-thumbs-up"></i>
									</a>
								</li>
								<li class="m_right_5">
									<a class="down button_type_20 bg_light_color_2 f_size_large f_right tr_delay_hover r_corners" target="_down" href="<{:U('Down/index?id='.$data['id'])}>">
										<span class="tooltip tr_all_hover r_corners color_dark f_size_small">下载[<span class="num"><{$data.download}></span>]</span>
										<i class="fa fa-cloud-download"></i>
									</a>
								</li>
							</ul>
							<div class="d_inline_middle">分享到: 这里是分享代码</div>

						</div>
					</div>
					<!--tabs-->
					<div class="m_bottom_45">						
					<!--tabs-->
							<h2 class="tt_uppercase color_dark m_bottom_20"><i class="fa fa-comments"></i> 发表你的看法</h2>
							<div class="m_bottom_45">
								<{:hook('documentDetailAfter',$data)}>
							</div>
					</div>

					<hr class="divider_type_3 m_bottom_15">
					<a href="<{:U('Index/index')}>" role="button" class="d_inline_b bg_light_color_2 color_dark tr_all_hover button_type_4 r_corners"><i class="fa fa-reply m_left_5 m_right_10 f_size_large"></i>返回首页</a>
			</section>	
			<aside class="col-lg-3 col-md-3 col-sm-3">
			<include file="Sidebar/newUp"/>
			</aside>
		</div>	
	</div>
</div>
</block>
<block name="script">
	<script type="text/javascript" src="__STATIC__/player/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="__STATIC__/jquery.rotate.min.js"></script>
	<script type="text/javascript" src="__TMPL__/js/jy_play.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#one-play').click();
		})
		
	</script>
</block>
